// Rewrite navbar
.navbar
  background-color transparent
  font-size 0.875rem
  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
  -webkit-box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

  .navbar-brand
    color var(--navbar-text-color)

  .navbar-toggler .animated-icon span
    background-color var(--navbar-text-color)

  .nav-item .nav-link
    display block
    color var(--navbar-text-color)
    transition color .2s, background-color .2s

    &:hover
      color var(--link-hover-color)
      background-color rgba(0, 0, 0, 0.1)

    i
      font-size 0.875rem

  .navbar-toggler
    border-width 0
    outline 0

  @media (min-width: 600px)
    &.scrolling-navbar
      padding-top 12px
      padding-bottom 12px
      -webkit-transition background 0.5s ease-in-out, padding 0.5s ease-in-out
      transition background 0.5s ease-in-out, padding 0.5s ease-in-out

    &.scrolling-navbar .navbar-nav > li
      -webkit-transition-duration 1s
      transition-duration 1s

  &.scrolling-navbar.top-nav-collapse
    padding-top 5px
    padding-bottom 5px

  .dropdown-menu
    font-size 0.875rem
    color var(--navbar-text-color)
    background-color rgba(0, 0, 0, 0.3)
    border none
    -webkit-transition background .5s ease-in-out,padding .5s ease-in-out
    transition background .5s ease-in-out,padding .5s ease-in-out

    @media (max-width: 991.98px)
      text-align center

  .dropdown-item
    color var(--navbar-text-color)

    &:hover, &:focus
      color var(--link-hover-color)
      background-color rgba(0, 0, 0, 0.1)

  @media (min-width: 992px)
    .dropdown:hover > .dropdown-menu
      display block

    .dropdown > .dropdown-toggle:active
      pointer-events none

    .dropdown-menu
      top 95%

  .animated-icon
    width 30px
    height 20px
    position relative
    margin 0
    -webkit-transform rotate(0deg)
    -moz-transform rotate(0deg)
    -o-transform rotate(0deg)
    transform rotate(0deg)
    -webkit-transition .5s ease-in-out
    -moz-transition .5s ease-in-out
    -o-transition .5s ease-in-out
    transition .5s ease-in-out
    cursor pointer

    span
      display block
      position absolute
      height 3px
      width 100%
      border-radius 9px
      opacity 1
      left 0
      -webkit-transform rotate(0deg)
      -moz-transform rotate(0deg)
      -o-transform rotate(0deg)
      transform rotate(0deg)
      -webkit-transition .25s ease-in-out
      -moz-transition .25s ease-in-out
      -o-transition .25s ease-in-out
      transition .25s ease-in-out
      background #ffffff

      &:nth-child(1)
        top 0

      &:nth-child(2)
        top 10px

      &:nth-child(3)
        top 20px

    &.open
      span
        &:nth-child(1)
          top 11px
          -webkit-transform rotate(135deg)
          -moz-transform rotate(135deg)
          -o-transform rotate(135deg)
          transform rotate(135deg)

        &:nth-child(2)
          opacity 0
          left -60px

        &:nth-child(3)
          top 11px
          -webkit-transform rotate(-135deg)
          -moz-transform rotate(-135deg)
          -o-transform rotate(-135deg)
          transform rotate(-135deg)

.navbar .dropdown-collapse, .top-nav-collapse, .navbar-col-show
  if $navbar-glass-enable
    ground-glass($navbar-glass-px, $navbar-bg-color, $navbar-glass-alpha)
  else
    background-color var(--navbar-bg-color)

@media (max-width: 767px)
  .navbar
    font-size 1rem
    line-height 2.5rem

// Rewrite container
.container-fluid
  padding-left 0
  padding-right 0

  .row
    margin-left 0
    margin-right 0

// Rewrite github-markdown.css
.markdown-body
  font-size 1rem
  margin-bottom 2rem
  font-family $font-family
  color var(--post-text-color)

  h1, h2, h3, h4, h5, h6
    color var(--post-heading-color)
    font-weight bold
    margin-bottom .75em
    margin-top 2em

    &:focus
      outline none

  a
    color var(--post-link-color)

  hr
    height .2em
    margin 2rem 0

  strong
    font-weight bold

  pre
    position relative
    overflow visible

    code
      font-size $code-font-size
      display block
      overflow-x auto
      padding .5rem 0
      line-height 1.5
      border-radius 3px
      tab-size 4

      &.mermaid > svg
        min-width 100%

  p > img, p > a > img
    max-width 90%
    margin 1.5rem auto
    display block
    box-shadow $img-shadow
    border-radius 3px

  blockquote
    color var(--sec-text-color)

  details
    cursor pointer

    summary
      outline none

// Rewrite highlight
.markdown-body
  div.hljs
    overflow-x initial
    padding 0
    border-radius 3px

    pre
      background-color initial !important

// Rewrite mdb.css
.list-group-item
  background-color transparent
  border 0

.page-link
  font-size 1.1rem

// Rewrite pagination
.pagination
  margin-top 3rem
  justify-content center

  .space
    align-self flex-end

  a, .current
    outline 0
    border 0
    background-color transparent
    font-size .9rem
    padding .5rem .75rem
    line-height 1.25
    border-radius .125rem
    transition background-color .2s ease-in-out

  a:hover, .current
    background-color var(--link-hover-bg-color)

// Rewrite modal
.modal-dialog .modal-content
  background-color var(--board-bg-color)
  border 0
  border-radius .125rem
  -webkit-box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
  box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)

.close
  color var(--text-color)

  &:hover
    color var(--link-hover-color)

  &:focus
    outline 0

.modal-dialog .modal-content .modal-header
  border-top-left-radius .125rem
  border-top-right-radius .125rem
  border-bottom 1px solid #dee2e6

.md-form
  position relative
  margin-top 1.5rem
  margin-bottom 1.5rem

.md-form
  input[type]
    -webkit-box-sizing content-box
    box-sizing content-box
    background-color transparent
    border none
    border-bottom 1px solid #ced4da
    border-radius 0
    outline none
    -webkit-box-shadow none
    box-shadow none
    transition border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out

    $normal = #4285f4

    &:focus:not([readonly])
      border-bottom 1px solid $normal
      -webkit-box-shadow 0 1px 0 0 $normal
      box-shadow 0 1px 0 0 $normal

      & + label
        color: $normal

    $valid = #00c851

    &.valid, &:focus.valid
      border-bottom 1px solid $valid
      -webkit-box-shadow 0 1px 0 0 $valid
      box-shadow 0 1px 0 0 $valid

      & + label
        color: $valid

    $invalid = #f44336

    &.invalid, &:focus.invalid
      border-bottom 1px solid $invalid
      -webkit-box-shadow 0 1px 0 0 $invalid
      box-shadow 0 1px 0 0 $invalid

      & + label
        color $invalid

    &.validate
      margin-bottom 2.5rem

    &.form-control
      height auto
      padding .6rem 0 .4rem 0
      margin 0 0 .5rem 0
      color var(--text-color)
      background-color transparent
      border-radius 0

  label
    font-size 0.8rem
    position absolute
    top -1rem
    left 0
    color #757575
    cursor text
    -webkit-transition color .2s ease-out, -webkit-transform .2s ease-out
    transition transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out

// Rewrite iconfont
.iconfont
  font-size 1rem
  line-height 1

// Rewrite checkbox
input[type=checkbox]
  -webkit-appearance none
  -moz-appearance none
  position relative
  right 0
  bottom 0
  left 0
  height 1.25rem
  width 1.25rem
  transition .2s
  color #fff
  cursor pointer
  margin .4rem .2rem .4rem !important
  outline 0
  border-radius 0.1875rem
  vertical-align -.65rem
  border 2px solid #2f4154

  &:after, &:before
    content " "
    transition .2s
    position absolute
    background #fff

  &:before
    left 0.125rem
    top 0.375rem
    width 0
    height 0.125rem
    -webkit-transform rotate(45deg)
    -moz-transform rotate(45deg)
    -ms-transform rotate(45deg)
    -o-transform rotate(45deg)
    transform rotate(45deg)

  &:after
    right 0.5625rem
    bottom 0.1875rem
    width 0.125rem
    height 0
    -webkit-transform rotate(40deg)
    -moz-transform rotate(40deg)
    -ms-transform rotate(40deg)
    -o-transform rotate(40deg)
    transform rotate(40deg)
    transition-delay .2s

  &:checked
    background #2f4154
    margin-right .5rem !important

    &:before
      left 0.0625rem
      top 0.625rem
      width 0.375rem
      height 0.125rem

    &:after
      right 0.3125rem
      bottom 0.0625rem
      width 0.125rem
      height 0.875rem

// Rewrite list-group
.list-group-item-action
  color var(--text-color)

  &:focus, &:hover
    color var(--link-hover-color)
    background-color var(--link-hover-bg-color)

// Rewrite valine
.v[data-class=v]
  .status-bar, .veditor, .vinput, .vbtn, p, pre code
    color var(--text-color) !important

  .vicon
    fill var(--text-color) !important

// Rewrite gitalk
.gt-container

  .gt-comment-content:hover
    -webkit-box-shadow none
    box-shadow none

  .gt-comment-body
    color var(--text-color) !important
    transition color .2s ease-in-out
